<template>
  <div class="report-container">
    <h3 class="report-title">
      个人养老年账户本金利息表
    </h3>
    <div class="report-box">
      <span class="report-unit">单位：万元</span>
      <table>
        <thead>
        <tr>
          <th class="header-total-span1"></th>
          <th class="header-total-span2">本年利息本金</th>
          <th class="header-total-span3">本年补缴历年账户累计本金</th>
          <th class="header-total-span4">本年补缴历年账户累计利息</th>
          <th class="header-total-span5">截至上年末个人账户部分累计本息<br>在本年产生的利息累计利息</th>
          <th class="header-total-span6">截至上年末个人账户部分<br>累计本息</th>
        </tr>
        </thead>
        <tbody>
        <tr class="reportTotal">
          <td class="header-total-span1 total-name-style">{{all.areaName}}</td>
          <td class="header-total-span2">{{all.benNianLiXiBenJin}}</td>
          <td class="header-total-span3">{{all.benNianBuJiaoLiNianLiJiBenJin}}</td>
          <td class="header-total-span4">{{all.benNianBuJiaoLiNianLiJiLiXi}}</td>
          <td class="header-total-span5">{{all.toSNGRZHTobenNianLiXiLeiJiLiXi}}</td>
          <td class="header-total-span6">{{all.toSNGRZHLeiJiBenXi}}</td>
        </tr>
        <tr v-for="(item,index) in reportData">
          <td class="header-total-span1">{{item.areaName}}</td>
          <td class="header-total-span2">{{item.benNianLiXiBenJin}}</td>
          <td class="header-total-span3">{{item.benNianBuJiaoLiNianLiJiBenJin}}</td>
          <td class="header-total-span4">{{item.benNianBuJiaoLiNianLiJiLiXi}}</td>
          <td class="header-total-span5">{{item.toSNGRZHTobenNianLiXiLeiJiLiXi}}</td>
          <td class="header-total-span6">{{item.toSNGRZHLeiJiBenXi}}</td>
        </tr>
        </tbody>
      </table>
      <span class="report-bottom-text">每年7月份生成</span>
      <!--<div class="report-remind">-->
      <!--&lt;!&ndash;<span class="report-remind-left">注：</span>&ndash;&gt;-->
      <!--<div class="report-remind-right">-->
      <!--&lt;!&ndash;<p v-for="(item,index) in reportRemind">&ndash;&gt;-->
      <!--&lt;!&ndash;{{index + 1}}、{{item}}&ndash;&gt;-->
      <!--&lt;!&ndash;</p>&ndash;&gt;-->
      <!--<p>{{conclusion}}</p>-->
      <!--</div>-->
      <!--</div>-->
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import {svgPath, quitFullScreen, getRankingData} from "../../assets/js/utils";
  import {setEditNum} from '../../api/api'
  export default {
    props: {
      siStatus: {
        type: Object,
        default: null
      },
      insuredType: {
        type: String,
        default: '1001'
      },
      queryYear: {
        type: String,
        default: ''
      },
      month: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        svgPath: svgPath,
        isEditable: true,
        reportRemind: ['手机已欠费', '请及时交付'],
        editIndex: -1,
        editableIndex: -1,
        all: {
          name: '汇总',
          dangQiNum: 3070,
          newTask: 30000,
          completionRate: '6.57%',
          id: 0,
        },
        title: '',
        reportData: [{
          name: '顺河区',
          dangQiNum: 3070,
          newTask: 30000,
          completionRate: '6.57%',
          rank: 1,
          id: 1,
        }, {
          name: '市本级',
          dangQiNum: 1070,
          newTask: 30000,
          completionRate: '6.57%',
          rank: 1,
          id: 2,
        }, {
          name: '房山区',
          dangQiNum: 19700,
          newTask: '',
          completionRate: '',
          rank: 1,
          id: 4,
        }, {
          name: '龙亭区',
          dangQiNum: 19700,
          newTask: 30000,
          completionRate: '6.57%',
          rank: 1,
          id: 3,
        }, {
          name: '丰台区',
          dangQiNum: 19700,
          newTask: '',
          completionRate: '',
          rank: 1,
          id: 4,
        }],
        originData: '',
        reportNumber: '',
        conclusion: [],
      }
    },
    // 自定义指令
    directives: {
      focus: {
        update: function (el, {value}) {
          if (value) {
            el.focus()
          }
        }
      },
      blur: {
        update: function (el, {value}) {
          if (value) {
            el.blur()
          }
        }
      }
    },
    watch: {
      siStatus(newVal){
        this.all = newVal.data.all;
        this.reportData = newVal.data.reportData;
        this.originData = JSON.stringify(this.reportData);
        getRankingData(this, this.reportData);
        this.title = newVal.data.reportName;
        this.reportNumber = newVal.data.reportNumber;
        this.conclusion = newVal.data.conclusion;
      }
    },
    methods: {
      showEdit(index){
        this.editIndex = index;
      },
      hideEdit(){
        this.editIndex = -1;
        this.editableIndex = -1;
      },
      chooseEdit(index){
        this.editableIndex = index;
      },
      hideBlur(e, index, id) {
        let val = e.target.value;
        let oldVal = oldVal = JSON.parse(this.originData)[index].newTask;
        ;
        if (val == oldVal) {
          //判断新增任务是否修改
        } else if (Number(val) > 0) {
          //发送
          let totalArr = [];
          this.reportData[index].newTask = val;
          this.reportData.map((item, index) => {
            totalArr.push(item.newTask);
          })
          this.all.newTask = totalArr.reduce((n, m) => Number(n) + Number(m));
          this.all.completionRate = Math.round((this.all.dangQiNum / this.all.newTask).toFixed(4) * 10000) / 100 + '%';
          this.originData = JSON.stringify(this.reportData);
          getRankingData(this)
          setEditNum('report/yearTargetSetUp', this.reportNumber, this.queryYear, id, val)
        } else {
          this.$toast.info({
            message: '输入数值错误'
          })
          this.reportData = JSON.parse(this.originData);
        }
      }
    }
  };
</script>

<style scoped>
  @import "../../assets/css/report.css";

  .report-box table th, .report-box table td {
    height: 32px;
    vertical-align: middle;
    border: solid 1px #bcbcbc;
    text-align: center;
    width: 16.6%;
  }

  .report-box .total-name-style {
    color: #ffffff;
  }

  .report-box .header-total-span1 {
    width: 15%;
  }

  .report-box .header-total-span2 {
    width: 15%;
  }

  .report-box .header-total-span3 {
    width: 15%;
  }

  .report-box .header-total-span4 {
    width: 15%;
  }

  .report-box .header-total-span5 {
    width: 20%;
  }

  .report-box .header-total-span6 {
    width: 20%;
  }

</style>
